<style>
    #shopro-kefu-container .el-dialog {
        width: 900px;
    }

    #shopro-kefu-container .el-dialog__body,
    #shopro-kefu-container .el-dialog__header {
        padding: 0 !important;
    }

    #shopro-kefu-container .el-dialog__header {
        background: #FBFBFB;
    }

    #shopro-kefu-container .el-image {
        width: 100%;
        height: 100%;
        border-radius: 19px;
    }

    #shopro-kefu-container .image-slot {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ellipsis-item {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .shopro-chat-goods-title {
        width: 144px;
    }

    .display-flex {
        display: flex;
    }

    .scrollbar-containering::-webkit-scrollbar {
        width: 6px;
        background: #F4F4F4;
    }

    .scrollbar-containering::-webkit-scrollbar-thumb {
        width: 6px;
        background: #e6e6e6;
        height: 20px;
        border-radius: 3px;
    }

    .el-textarea__inner::-webkit-scrollbar {
        width: 4px;
        background: #F4F4F4;
    }

    .el-textarea__inner::-webkit-scrollbar-thumb {
        width: 4px;
        background: #e6e6e6;
        height: 20px;
        border-radius: 3px;
    }


    .shopro-kefu-container-shake {
        animation: shopro-shake 1s;
        -o-animation: shopro-shake 1s;
        -webkit-animation: shopro-shake 1s;
        -moz-animation: shopro-shake 1s;
    }

    @keyframes shopro-shake {

        0%,
        100% {
            -webkit-transform: translateX(0);
        }

        10%,
        30%,
        50%,
        70%,
        90% {
            -webkit-transform: translateX(-5px);
        }

        20%,
        40%,
        60%,
        80% {
            -webkit-transform: translateX(5px);
        }
    }

    @keyframes dyeing {
        0% {
            -moz-box-shadow: 0 0 0 0 rgba(119, 97, 251, 0.5);
            box-shadow: 0 0 0 0 rgba(119, 97, 251, 0.5);
        }

        70% {
            -moz-box-shadow: 0 0 0 10px rgba(119, 97, 251, 0);
            box-shadow: 0 0 0 10px rgba(119, 97, 251, 0);
        }

        100% {
            -moz-box-shadow: 0 0 0 0 rgba(119, 97, 251, 0);
            ;
            box-shadow: 0 0 0 0 rgba(119, 97, 251, 0);
            ;
        }
    }

    #shopro-kefu-button {
        position: absolute;
        top: 80%;
        right: 20px;
        width: 50px;
        height: 50px;
        z-index: 2000;
        cursor: pointer;
        border-radius: 25px;
        background: #7761FB url(/assets/addons/shopro/img/chat/menu.gif) center no-repeat;
        background-size: 30px 27px;
        animation: dyeing 2s infinite;
    }

    .shopro-kefu-title {
        display: flex;
        align-items: center;
        /* justify-content: space-between; */
        padding: 0 18px;
        height: 50px;
        border-bottom: 1px solid #e6e6e6;
    }

    .shopro-kefu-title-avatar {
        width: 28px;
        height: 28px;
        border: 1px solid #E6E6E6;
        border-radius: 14px;
        margin-right: 12px
    }

    .shopro-kefu-title-name {
        margin-right: 16px;
        color: #534C70;
        font-size: 14px;
    }

    .shopro-kefu-title-line {
        width: 80px
    }

    .shopro-kefu-content {
        height: 657px;
        display: flex;
    }

    .chater-left {
        height: 100%;
        width: 303px;
        border-right: 1px solid #F4F4F4;
        display: flex;
        flex-direction: column;
    }

    .chater-header {
        display: flex;
        width: 300px;
        height: 38px;
        border-bottom: 1px solid #F4F4F4;
    }

    .chater-header-item {
        width: 100px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 12px;
    }

    .chater-header-item-active {
        width: 84px;
        height: 26px;
        background: rgba(157, 96, 255, 0.2);
        border-radius: 18px;
        line-height: 26px;
        text-align: center;
        font-size: 12px;
        color: #7438D5;
    }

    .chater-header-container {
        flex: 1;
        overflow: auto;
        background: #F9F9F9;
    }

    .chater-header-list {
        padding: 8px 10px 13px 0px;
        border-bottom: 1px solid #F4F4F4;
        cursor: pointer;
        background: #fff;
    }

    .chater-header-list:hover {
        /* background: #EBDFFF; */
    }

    .chater-header-list:hover .chater-el-icon-close i {
        display: block;
    }

    .chater-header-list-active,
    .chater-header-list-offline-active {
        background: #EBDFFF;
    }

    .offline-status {
        margin: 0 6px;
        flex-shrink: 0;
    }

    .offline-status .line-status-offline {
        color: #ED655F;
    }

    .offline-status .line-status-online {
        color: #7438D5;
    }

    .chater-el-icon-close {
        font-size: 10px;
        width: 22px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .chater-el-icon-close i {
        display: none;
    }

    .chater-el-icon-close:hover {
        color: #A268FF;
    }

    .chater-header-list-image {
        width: 40px;
        height: 40px;
        background: #C4C4C4;
        border: 1px solid #E6E6E6;
        margin-right: 10px;
        border-radius: 20px;
    }

    .chater-header-list-image img {
        width: 100%;
        height: 100%;
        border-radius: 20px;
    }

    .chater-header-list-message {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .chater-header-list-message-1 {
        display: flex;
        justify-content: space-between;
        line-height: 14px;
        margin-bottom: 6px
    }

    .chater-header-list-message-2 {
        line-height: 12px;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .chater-right {
        flex: 1;
        position: relative;
    }

    .shopro-chat-container {
        height: 517px;
        padding: 20px;
        overflow: auto;
    }

    .shopro-chat-container-item {
        display: flex;
        margin-bottom: 42px;
    }

    .shopro-chat-container-item-system {
        width: 100%;
    }

    .shopro-chat-container-item-image {
        width: 38px;
        height: 38px;
        border: 1px solid #E6E6E6;
        border-radius: 19px;
        margin-right: 14px
    }

    .shopro-chat-container-item-image-1 {
        width: 38px;
        height: 38px;
        border: 1px solid #E6E6E6;
        border-radius: 19px;
        margin-left: 14px
    }

    .shopro-chat-container-item-message {
        background: #F6F6F6;
        border-radius: 6px 6px 6px 0px;
        max-width: 432px;
    }

    .shopro-chat-container-item-message-1 {
        max-width: 432px;
        border-radius: 6px 6px 0px 6px;
        color: #444;
        background: #ECE1FF;
    }

    .shopro-chat-container-item-message-text {
        padding: 10px;
        line-height: 18px;
    }

    .shopro-chat-container-item-message-text img {
        width: 100%;
    }

    .shopro-send-container {
        width: 100%;
        height: 140px;
        padding: 0 24px 0 16px;
        border-top: 1px solid #e6e6e6;
    }

    .shopro-send-tip-container {
        height: 42px;
        display: flex;
        align-items: center;
    }

    .shopro-send-tip-item {
        width: 18px;
        height: 18px;
        margin-right: 12px;
        cursor: pointer;
    }

    .shopro-send-textarea {
        height: 44px;
        overflow: auto;
    }

    .shopro-send-textarea::-webkit-scrollbar {
        width: 6px;
    }

    .shopro-send-textarea::-webkit-scrollbar-thumb {
        width: 6px;
        background: #ccc;
        height: 20px;
        border-radius: 3px;
    }

    .shopro-send-textarea textarea {
        height: 44px;
        width: 554px !important;
        border: none;
        margin: 0px;
    }

    .shopro-send-textarea textarea:focus {
        border: none !important;
    }

    .shopro-send-button-container {
        padding: 12px 0;
        height: 64px
    }

    .shopro-send-button {
        width: 78px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 13px;
        color: #fff;
        background: #7438D5;
        border-radius: 4px;
        float: right;
        cursor: pointer;
    }


    #inputFile {
        display: none;
    }

    .shopro-chat-goods-item {
        min-width: 240px;
        height: 60px;
        /* background: #FFFFFF; */
        /* border: 1px solid #E6E6E6; */
        border-radius: 4px;
        padding: 8px;
        display: flex;
        align-items: center;
    }

    .shopro-chat-goods-image {
        width: 44px;
        height: 44px;
        border: 1px solid #E6E6E6;
        border-radius: 3px;
        margin-right: 10px;
    }

    .shopro-chat-goods-image .el-image,
    .shopro-chat-image {
        position: relative;
        border-radius: 3px !important;
    }

    .shopro-chat-goods-message {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        height: 100%;
    }

    .shopro-chat-goods-bodys {
        justify-content: space-between;
        height: 20px;
    }

    .customer-service {
        color: #fff;
        justify-content: flex-end;
    }

    .customer-user {
        color: #444;
        justify-content: flex-start;
    }

    .customer-system {
        justify-content: center;
    }

    .shopro-chat-system {
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        border-radius: 10px;
        background: #f9f9f9;
    }

    .shopro-chat-emoji-container {
        display: flex;
        flex-wrap: wrap;
        height: 150px;
        overflow: auto;
        padding: 10px 10px 5px;
    }

    .shopro-chat-emoji-image {
        width: 24px;
        height: 24px;
        /* border: 1px solid #E6E6E6; */
        border-radius: 3px;
        margin-right: 10px;
        margin-bottom: 5px;
    }

    .shopro-chat-emoji-image:nth-of-type(6n) {
        margin-right: 0px;
    }

    .shopro-send-pre,
    .shopro-send-pre:focus,
    .shopro-send-pre:default {
        border: none !important;
        outline: none;
        background: none;
        height: 44px;
        padding: 0;
    }

    .message-dot {
        padding: 4px 7px;
        border-radius: 10px;
        text-align: center;
        background: #F15847;
        color: #fff;
    }

    .common-words-item,
    .common-words-item-tip {
        cursor: pointer;
        height: 30px;
        line-height: 30px;
        padding: 0 12px;
        border-bottom: 1px solid #e6e6e6;
        color: #666;
    }

    .common-words-item-tip {
        height: 40px;
        line-height: 40px;
        border-bottom: none;
    }

    .common-words-item:hover {
        background: #F7F7FC;
    }

    .no-more-data {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 22px;
    }

    .shopro-chat-order-item {
        cursor: pointer;
    }

    .shopro-chat-order-title {
        height: 30px;
        line-height: 30px;
        border-bottom: 1px solid #e6e6e6;
        padding: 0 10px;
    }

    #shopro-kefu-container .el-dialog__headerbtn {
        height: 50px;
        top: 0;
    }

    .shopro-kefu-title-line input,
    .shopro-kefu-title-line .el-input__inner {
        border: none;
        background-color: #FBFBFB;
        color: inherit;
    }

    #shopro-kefu-button .message-dot {
        width: 14px;
        height: 14px;
        border-radius: 7px;
        float: right;
    }

    .el-popover {
        padding: 0;
    }

    .el-popover-common-words {
        max-height: 150px;
        overflow-y: auto;
        font-size: 12px;
    }

    .emoji {
        width: 20px !important;
        height: 20px !important;
        margin: 0 2px;
    }

    .el-icon-loading {
        color: #7438D5;
        font-size: 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -10px;
        margin-top: -10px;
    }

    .shopro-chat-container-item-message .el-icon-loading {
        color: #999;
    }

    .transfer-item {
        width: 160px;
        background: #fff;
        font-size: 12px;
    }

    .transfer-item .el-input__inner {
        padding: 0 10px;
    }

    .el-dialog__wrapper {
        overflow: hidden;
    }

    .specific-createtime {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 6px;
    }

    .specific-createtime .createtime-item {
        width: 160px;
        border-radius: 10px;
        height: 20px;
        line-height: 20px;
        background: #f6f6f6;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #777;
    }

    label {
        margin-bottom: 0;
    }

    .error-tip-popover.el-popover {
        padding: 12px 16px;
        border: 1px solid #e6e6e6;
    }

    .error-tip-popover.el-popper[x-placement^=left] .popper__arrow {
        border-left-color: #e6e6e6;
    }

    .kefu-access-status {
        position: absolute;
        top: 20px;
        left: 16px;
        width: 565px;
        height: 42px;
        background: #FFFCF7;
        box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        padding: 0 16px;
        font-size: 14px;
        color: #F0AF41;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 100;
    }

    .kefu-access-status-left i {
        margin-right: 8px;
    }

    .shopro-nosend-container {
        padding: 16px;
        font-size: 17px;
        color: #D1D1D1;
    }

    #shopro-kefu-container .shopro-chat-container-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    #shopro-kefu-container .shopro-chat-container-icon .el-image {
        width: 146px;
        height: 146px;
    }

    .shopro-chat-container-tip {
        font-size: 16px;
        color: #999999;
        margin-top: 30px;
    }
</style>

<script type="text/x-template" id="chatTemp" style="position: relative;">

    <div id="shopro-kefu-container" class="">
        <el-popover
        popper-class="error-tip-popover"
        placement="left"
        width="264"
        trigger="manual"
        v-model="errorTipVisible">
        <div>客服连接失败，请点击 <span style="cursor: pointer;color: #7438D5;" @click="linkWebSocket(passvalue.wsUri, passvalue.token, passvalue.expire_time, passvalue.customer_service_id)">重新连接</span><i style="margin-left:10px;cursor: pointer" class="el-icon-close" @click="closeErrorTipVisible"></i></div>
        <div slot="reference" id="shopro-kefu-button" ref="shoproKefuButtonRef" v-show="isButtonShow" @mousedown="moveKefu" @click="openDialog()">
            <div v-if="kefuButtonvisible && !dialogVisible" class="message-dot"></div>
        </div>
      </el-popover>

        <el-dialog :visible.sync="dialogVisible" :before-close="handleClose" :custom-class="shoproKefuShake?'shopro-kefu-container-shake':''" v-dialogDrag>
            <span slot="title">
                <div class="shopro-kefu-title" ref="shoproKefuTitleRef" v-if="adminData.customer_service" @click.stop="closerightShowId">
                    <img class="shopro-kefu-title-avatar" :src="adminData.customer_service.avatar?Fast.api.cdnurl(adminData.customer_service.avatar):'/assets/addons/shopro/img/chat/default.png'">
                    <div class="shopro-kefu-title-name">客服-{{adminData.customer_service.name}}</div>
                    <div class="shopro-kefu-title-line" v-if="relink==1">
                        <el-select v-model="lineStatus" size="mini" placeholder="" @change="changeLineStatus" :style="{color:lineStatus=='online'?'#7438D5':(lineStatus=='offline'?'#ED655F':'#666666')}">
                            <el-option v-for="line in lineOptions" :key="line.value" :label="line.label" :value="line.value">
                                <span :style="{color: line.color}">{{ line.label }}</span>
                            </el-option>
                        </el-select>
                    </div>
                    <div v-if="relink==0">
                        网络断开中，请点击 <span style="cursor: pointer;color: #7438D5;" @click="linkWebSocket(passvalue.wsUri, passvalue.token, passvalue.expire_time, passvalue.customer_service_id)">重新连接</span>
                    </div>
                </div>
            </span>
            <div class="shopro-kefu-content" @click.stop="closerightShowId">
                    <div class="chater-left">
                        <div class="chater-header">
                            <div class="chater-header-item"
                                v-for="(chater,chaterIndex) in liaoData" @click="changeGroup(chaterIndex)">
                                <span v-if="groupIndex!=chaterIndex">{{chater.title}}</span>
                                <div class="chater-header-item-active" v-if="groupIndex==chaterIndex">{{chater.title}}</div>
                            </div>
                        </div>
                        <div class="chater-header-container scrollbar-containering">
                            <div class="chater-header-list" v-if="openGroupList.length>0"
                                v-for="(group,gIndex) in openGroupList" :class="[(user_offline.includes(group.session_id) && isChatingId==group.session_id)?'chater-header-list-offline-active':'',((user_offline.includes(group.session_id) && isChatingId!=group.session_id)) ?'chater-header-list-offline':'',((!user_offline.includes(group.session_id)) && isChatingId==group.session_id)?'chater-header-list-active':'']" @click.stop="selectChating(group.session_id,gIndex,true,group)"
                                @contextmenu.prevent="show($event,group.session_id,gIndex)">
                                <div class="display-flex">
                                    <div class="chater-el-icon-close" @click.stop="deleteChating(group.session_id,gIndex,true)">
                                        <i class="el-icon-close"></i>
                                    </div>
                                    <div class="chater-header-list-image">
                                        <img :src="group.avatar?Fast.api.cdnurl(group.avatar):'/assets/addons/shopro/img/chat/user-default.png'" />
                                    </div>
                                    <div class="chater-header-list-message">
                                        <div class="chater-header-list-message-1">
                                            <div class="display-flex" style="flex:1">
                                                <div class="ellipsis-item">{{group.nickname}}</div>
                                                <div class="offline-status">
                                                    <span v-if="user_offline.includes(group.session_id)" class="line-status-offline">离线</span>
                                                    <span v-else class="line-status-online">在线</span>
                                                </div>
                                            </div>
                                            <div style="font-size:12px;flex-shrink: 0;" v-if="group.last_message">
                                            {{timeFilter(group.last_message.createtime*1000)}}
                                            </div>
                                        </div>
                                        <div class="chater-header-list-message-2">
                                            <div class="display-flex">
                                                <!-- <div v-if="user_offline.includes(group.session_id)" class="offline-status">{{user_offline.includes(group.session_id)?'离线':''}}</div> -->
                                                <div v-if="group.last_message">
                                                    <div v-if="group.last_message.message_type=='text'">
                                                        [文本]
                                                    </div>
                                                    <div v-if="group.last_message.message_type=='image'">[图片]</div>
                                                    <div v-if="group.last_message.message_type=='goods'">[商品]</div>
                                                    <div v-if="group.last_message.message_type=='order'">[订单]</div>
                                                </div>
                                            </div>
                                            <div class="message-dot" v-if="group.message_unread_num">{{group.message_unread_num>99?'99+':group.message_unread_num}}</div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 右键 -->
                                <div :style="{position:'fixed',top:rightShowPosition.top,left:rightShowPosition.left,zIndex:1}" v-if="rightShowId==group.session_id">
                                    <el-select class="transfer-item" v-model="transferAdminList" placeholder="请选择转接客服人员" @change="transferKfu" size="small">
                                        <el-option
                                          v-for="item in changeKefuList"
                                          :key="item.id"
                                          :label="item.name"
                                          :value="item.id">
                                        </el-option>
                                      </el-select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="chater-right">
                        <!-- 弹出提示 -->
                        <div v-if="kefuAccessStatus" class="kefu-access-status">
                            <div class="kefu-access-status-left">
                              <i class="el-icon-warning"></i>
                                {{kefuAccessTip}}  
                            </div>
                            <i class="el-icon-close" @click="closeKefuAccessStatus"></i>
                        </div>
                        <div v-show="!isChatingId" class="shopro-chat-container scrollbar-containering shopro-chat-container-icon">
                            <el-image src="/assets/addons/shopro/img/chat/chat-icon.png" fit="contain">
                                <div slot="error" class="image-slot">
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                            </el-image>
                            <div class="shopro-chat-container-tip">
                                暂时没有会话哦!
                            </div>
                        </div>
                        <div v-show="isChatingId" class="shopro-chat-container scrollbar-containering" ref="shoproChatContainerRef">
                        <div class="no-more-data" v-if="message_num<10">没有更多数据了</div>
                            <template v-if="isChatingId">
                                <div class="shopro-chat-container-item" 
                                :class="[specific.sender_identify=='customer_service'?'customer-service':'customer-user',specific.message_type=='system'?'customer-system':'']"
                                v-for="(specific,specificindex) in specificChatMessage" style="flex-direction: column;">
                                    <template v-if="specific.message_type=='system'">
                                        <div class="shopro-chat-system">{{specific.message}}<div>
                                    </template>	
                                    <template v-if="specific.sender_identify=='user' && specific.message_type!='system'">
                                        <template>
                                            <div class="specific-createtime" v-if="specificindex>0 && specific.createtime-specificChatMessage[specificindex-1].createtime>300">
                                                <div class="createtime-item">
                                                    {{Moment(specific.createtime*1000).format('YYYY-MM-DD HH:mm:ss')}}
                                                </div>
                                            </div>
                                            <div class="specific-createtime" v-if="specificindex==0 && specific.createtime">
                                                <div class="createtime-item">
                                                    {{Moment(specific.createtime*1000).format('YYYY-MM-DD HH:mm:ss')}}
                                                </div>
                                            </div>
                                        </template>
                                        <div class="display-flex">
                                            <div class="shopro-chat-container-item-image">
                                                <el-image v-if="specific.identify"
                                                :src="specific.identify.avatar?Fast.api.cdnurl(specific.identify.avatar):'/assets/addons/shopro/img/chat/user-default.png'"
                                                fit="cover">
                                                    <div slot="error" class="image-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                    </div>
                                                </el-image>
                                            </div>
                                            <div class="shopro-chat-container-item-message">
                                                <!--type='text' -->
                                                <div class="shopro-chat-container-item-message-text" v-if="specific.message_type=='text'" v-html="specific.message"></div>	
                                                <!--type='image' -->
                                                <div class="shopro-chat-container-item-message-text shopro-chat-image" :style="{width:!specific.hidden?'30px':''}" v-if="specific.message_type=='image'">
                                                    <i v-if="!specific.hidden" class="el-icon-loading"></i>
                                                    <el-image ref="imageRef" lazy :src="Fast.api.cdnurl(specific.message)" fit="contain" @load="getimageload(specificindex)" @error="imagerror(specificindex)">
                                                        <div slot="error" class="image-slot">
                                                        <i class="el-icon-picture-outline"></i>
                                                        </div>
                                                    </el-image>
                                                </div>
                                                <!--type='goods' -->
                                                <div class="shopro-chat-goods-item" v-if="specific.message_type=='goods'" @click="openGoods(specific.message.id)">
                                                    <div class="shopro-chat-goods-image">
                                                        <el-image
                                                        :src="Fast.api.cdnurl(specific.message.image)"
                                                        fit="contain">
                                                            <div slot="error" class="image-slot">
                                                                <i class="el-icon-picture-outline"></i>
                                                            </div>
                                                        </el-image>
                                                    </div>
                                                    <div class="shopro-chat-goods-message">
                                                        <div class="display-flex">
                                                            <div style="margin-right:10px;">{{specific.message.id}}</div>
                                                            <div class="shopro-chat-goods-title ellipsis-item">{{specific.message.title}}</div>
                                                        </div>
                                                        <div class="shopro-chat-goods-bodys display-flex">
                                                            <div>￥{{specific.message.price}}</div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!--type='order' -->
                                                <div class="shopro-chat-order-item" v-if="specific.message_type=='order'" @click="openOrder(specific.message.id)">
                                                    <div class="shopro-chat-order-title">订单号：{{specific.message.order_sn}}</div>
                                                    <div class="shopro-chat-goods-item">
                                                        <div class="shopro-chat-goods-image">
                                                            <el-image
                                                            :src="Fast.api.cdnurl(specific.message.image)"
                                                            fit="contain">
                                                                <div slot="error" class="image-slot">
                                                                    <i class="el-icon-picture-outline"></i>
                                                                </div>
                                                            </el-image>
                                                        </div>
                                                        <div class="shopro-chat-goods-message">
                                                            <div class="display-flex">
                                                                <div style="margin-right:10px">{{specific.message.id}}</div>
                                                                <div class="shopro-chat-goods-title ellipsis-item">{{specific.message.title}}</div>
                                                            </div>
                                                            <div class="shopro-chat-goods-bodys display-flex">
                                                                <div>￥{{specific.message.price}}</div>
                                                                <div class="shopro-chat-goods-stock">x{{specific.message.num}}</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                    <template v-if="specific.sender_identify=='customer_service' && specific.message_type!='system'">
                                        <div class="specific-createtime" v-if="specificindex>0 && specific.createtime-specificChatMessage[specificindex-1].createtime>300">
                                                <div class="createtime-item">
                                                    {{Moment(specific.createtime*1000).format('YYYY-MM-DD HH:mm:ss')}}
                                                </div>
                                            </div>
                                            <div class="specific-createtime" v-if="specificindex==0 && specific.createtime">
                                                <div class="createtime-item">
                                                    {{Moment(specific.createtime*1000).format('YYYY-MM-DD HH:mm:ss')}}
                                                </div>
                                            </div>
                                        <div class="display-flex" style="justify-content: flex-end;">
                                        <div class="shopro-chat-container-item-message-1">
                                        <!--type='text' -->
                                        <div class="shopro-chat-container-item-message-text" v-if="specific.message_type=='text'" v-html="specific.message"></div>	
                                        <!--type='image' -->
                                        <div class="shopro-chat-container-item-message-text shopro-chat-image" :style="{width:!specific.hidden?'30px':''}" v-if="specific.message_type=='image' && specific.message">
                                            <i v-if="!specific.hidden" class="el-icon-loading"></i>
                                            <el-image ref="imageRef" lazy :src="Fast.api.cdnurl(specific.message)" fit="contain" @load="getimageload(specificindex)" @error="imagerror(specificindex)">
                                                <div slot="error" class="image-slot">
                                                <i class="el-icon-picture-outline"></i>
                                                </div>
                                            </el-image>
                                        </div>
                                        <div class="shopro-chat-goods-item" v-if="specific.message_type=='goods'" @click="openGoods(specific.message.id)">
                                                <div class="shopro-chat-goods-image">
                                                    <el-image
                                                    :src="Fast.api.cdnurl(specific.message.image)"
                                                    fit="contain">
                                                        <div slot="error" class="image-slot">
                                                            <i class="el-icon-picture-outline"></i>
                                                        </div>
                                                    </el-image>
                                                </div>
                                                <div class="shopro-chat-goods-message">
                                                    <div class="display-flex">
                                                        <div style="margin-right:10px">{{specific.message.id}}</div>
                                                        <div class="shopro-chat-goods-title ellipsis-item">{{specific.message.title}}</div>
                                                    </div>
                                                    <div class="shopro-chat-goods-bodys display-flex">
                                                        <div>￥{{specific.message.price}}</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="shopro-chat-container-item-image-1">
                                            <el-image v-if="specific.identify"
                                            :src="specific.identify.avatar?Fast.api.cdnurl(specific.identify.avatar):'/assets/addons/shopro/img/chat/default.png'"
                                            fit="cover">
                                                <div slot="error" class="image-slot">
                                                    <i class="el-icon-picture-outline"></i>
                                                </div>
                                            </el-image>
                                        </div>
                                    </div>
                                    </template>
                                </div>
                            </template>
                        </div>
                        <div class="shopro-send-container shopro-nosend-container" v-show="isChatingId && kefuAccessStatusSend">
                            暂时无法与之会话
                        </div>
                        <div class="shopro-send-container" v-show="isChatingId && !kefuAccessStatusSend">
                            <div class="shopro-send-tip-container">
                            <el-popover placement="top-start" width="222" v-model="emojivisible">
                                    <div class="scrollbar-containering shopro-chat-emoji-container" style="">
                                        <div class="shopro-chat-emoji-image" v-for="emoji in emoji_list" @click="selectEmoji(emoji)">
                                            <el-image
                                            :src="'/assets/addons/shopro/img/emoji/'+emoji.file"
                                            fit="contain">
                                                <div slot="error" class="image-slot">
                                                    <i class="el-icon-picture-outline"></i>
                                                </div>
                                            </el-image>
                                        </div>
                                    </div>
                                    <img class="shopro-send-tip-item" slot="reference" src="/assets/addons/shopro/img/chat/expression.png" />
                                </el-popover>
                                <el-popover placement="top-start" width="180" v-model="commonWordsvisible">
                                    <div>
                                        <div class="common-words-item" v-if="commonWordsList.length==0">赶紧去配置常用语吧～</div>
                                        <div class="scrollbar-containering el-popover-common-words"  v-if="commonWordsList.length>0">
                                            <div class="common-words-item ellipsis-item" v-for="(words,wordsIndex) in commonWordsList" @click="selectCommonWords(wordsIndex)">{{words.name}}</div>
                                        </div>
                                    </div>
                                    <img class="shopro-send-tip-item" slot="reference" src="/assets/addons/shopro/img/chat/commonWords.png" />
                                </el-popover>
                                <img class="shopro-send-tip-item" style="margin-top: 4px;" @click="selectGoods()" src="/assets/addons/shopro/img/chat/goods.png" />
                                <div class="shopro-send-tip-item">
                                    <label for="inputFile">
                                    <img class="shopro-send-tip-item" src="/assets/addons/shopro/img/chat/file.png" />
                                    </label>
                                    <input id="inputFile" type="file" @change="addfile" ref="inputFileRef" multiple accept="image/png,image/jpeg,image/gif,image/jpg"/>
                                </div>
                            </div>
                            <div class="shopro-send-textarea scrollbar-containering">
                                <div class="shopro-send-pre" v-model="sendMessage" contenteditable @keyup.enter.stop="successMessage(event)"></div>
                            </div>
                            <div class="shopro-send-button-container">
                                <div class="shopro-send-button" @click="successMessage()">发送</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</script>